<template>
  <div class="mappage">
      <div class="section">
          <input type="text"
           placeholder="搜索"
           focus="true"
           v-model="keywords"
           @input="bindInput">
      </div>
      <scroll-view
       :scroll-y="true"
       class="addcont"
       style="height: 500rpx;">
        <div class="result"
         v-for="(item,index) in tips" :key="index"
         @touchstart="bindSearch(item.name)">
          {{item.name}}
        </div>
      </scroll-view>
      <div class="map-container">
        <div class="title">显示当前位置:</div>
        <map class="map"
         id="map"
         scale="16"
         :longitude="longitude"
         :latitude="latitude"
         :markers="markers"></map>
      </div>
  </div>
</template>

<script>
import amapFile from '../../utils/amap-wx.js'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      tips: [],
      longitude: 0,
      latitude: 0,
      markers:[],
      keywords: ''
    }
  },
  mounted() {
    this.getMapaddress()
  },
  methods: {
    // 借助mapMutations生成对应的方法
    ...mapMutations(['update']),
    getMapaddress() {
      let _this = this
      var myAmapFun = new amapFile.AMapWX({
        key: '256d94ac927c73a25e9177d789a1d060'
      })
      myAmapFun.getRegeo({
        iconPath: "/static/images/marker.png",
        iconWidth: 22,
        iconHeight: 32,
        success(data) {
          // console.log(data)
          let marker = [
            {
              id: data[0].id,
              longitude: data[0].longitude,
              latitude: data[0].latitude,
              width: data[0].width,
              height: data[0].height
            }
          ]
          _this.markers = marker
          _this.longitude = data[0].longitude
          _this.latitude = data[0].latitude
        },
        fail(info) {
          console.log(info)
        }
      })
    },
    // 通过用户输入关键词, 返回提示词数据
    bindInput(e) {
      // console.log(e)
      let _this = this
      let keywords = _this.keywords
      var myAmapFun = new amapFile.AMapWX({
        key: '256d94ac927c73a25e9177d789a1d060'
      })
      myAmapFun.getInputtips({
        keywords: keywords,
        location: '',
        success(data) {
          // console.log(data)
          if (data && data.tips) {
            _this.tips = data.tips
          }
        }
      })
    },
    bindSearch(cityName) {
      this.update({cityName: cityName})
      // 关闭当前页面, 返回上一页
      wx.navigateBack({
        dalta: 1
      })
    }
  }
}
</script>

<style scoped>
@import './style.css';
</style>